<script lang="ts" setup>
import { Api } from '@/apis'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import type { HotData } from '@/typings'
import HotContentPreview from '@/components/HotContentPreview.vue'
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()

const { browseRecords } = store

const hotData = ref<Array<HotData>>([])

const router = useRouter()

const getHotData = async () => {
    let { data } = await Api.getHotData()

    hotData.value = data.data
    // console.log('***** hotData *****')
    // console.log('热门数据 (hotdata) :',  hotData.value )
    // console.log('***** hotData *****')
}

getHotData()

const goToDetail = (bvid: string, h: HotData) => {
    let obj = {
        bvid: h.bvid,
        aid: h.aid,
        length: h.duration,
        title: h.title,
        play: h.stat.like,
        video_review: h.stat.view,
        pic: h.pic
    }
    browseRecords(obj)
    router.push(`/video/${bvid}`)   
}


</script>

<template>
    <div class="flex flex-wrap">
        <div v-for="h in hotData" :key="h.aid" class="w-1/2 px-1 py-2" @click="goToDetail(h.bvid, h)">
            <HotContentPreview :list="h" />
        </div>
    </div>
</template>